<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box-1{
				display: none;
				width: 200px;
				height: 200px;
				outline: 1px #ccc solid;
			}
			.btn_active{
				background: red;
			}
		</style>
	</head>
	<body>
		<button class="btn btn_active">111</button>
		<button class="btn">222</button>
		<button class="btn">333</button>
		<div class="box">
			<div class="box-1" style="display: block;">
				111	
			</div>
			<div class="box-1">
				222
			</div>
			<div class="box-1">
				333
			</div>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var btn = document.getElementsByClassName('btn')
	var box = document.getElementsByClassName('box-1')
	for (var i=0;i<btn.length;i++) {
		(function(n){
			btn[n].onclick=function(){
				for (var j=0;j<btn.length;j++) {
					btn[j].classList.remove('btn_active')
					box[j].style.display = 'none'
				}
				this.classList.add('btn_active')
				box[n].style.display = 'block'
			}
		})(i)
	}
</script>
